/**
 * Created with hong.rong
 * Date:2020/08/02
 */

import React, { useRef, useEffect } from 'react'
import { isFunction } from 'lodash'
import WE from 'wangeditor'
import { uploadURL } from '@/utils/config'

export default function({ disabled = false, value, onChange }) {
  const editorRef = useRef()
  const containerRef = useRef()

  useEffect(() => {
    if (containerRef.current) {
      editorRef.current = new WE(containerRef.current)
      editorRef.current.customConfig = {
        menus: [
          'head', // 标题
          'bold', // 粗体
          'fontSize', // 字号
          'fontName', // 字体
          'italic', // 斜体
          'underline', // 下划线
          'strikeThrough', // 删除线
          'foreColor', // 文字颜色
          'backColor', // 背景颜色
          'link', // 插入链接
          'list', // 列表
          'justify', // 对齐方式
          'quote', // 引用
          'emoticon', // 表情
          'image', // 插入图片
          'table', // 表格
          // 'video',  // 插入视频
          'code', // 插入代码
          'undo', // 撤销
          'redo', // 重复
        ], // 自定义菜单配置
        zIndex: 100, // 配置编辑区域的 z-index
        pasteFilterStyle: false, // 关闭粘贴样式的过滤
        pasteIgnoreImg: true, // 忽略粘贴内容中的图片
        showLinkImg: false, // 上传图片-隐藏“网络图片”tab
        uploadFileName: 'file', // 自定义配置 filename
        uploadImgServer: uploadURL, // 上传地址
        uploadImgHeaders: {
          // 上传图片的自定义header
          token: localStorage.getItem('token'),
        },
        uploadImgHooks: {
          customInsert: (insertLinkImg, result = {}, editor) => {
            // 图片上传并返回结果，自定义插入图片的事件，而不是编辑器自动插入图片
            insertLinkImg(result.data || '')
          },
          // before: (xhr, editor, files) => {
          //   // 图片上传之前触发
          //   console.log(xhr, editor, files, 'before')
          //   // 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
          //   // return {
          //   //     prevent: true,
          //   //     msg: '放弃上传'
          //   // }
          // },
          // success: (xhr, editor, result) => {
          //   // 图片上传并返回结果，图片插入成功之后触发
          //   console.log(xhr, editor, result, 'success')
          // },
          // fail: (xhr, editor, result) => {
          //   // 图片上传并返回结果，但图片插入错误时触发
          //   console.log(xhr, editor, result, 'fail')
          // },
          // error: (xhr, editor) => {
          //   // 图片上传出错时触发
          // },
          // timeout: (xhr, editor) => {
          //   // 图片上传超时时触发
          // }
        },
        onchange: html => {
          isFunction(onChange) && onChange(html)
        },
      }
      editorRef.current.create()
    }
    return () => {
      if (editorRef.current && isFunction(editorRef.current.remove)) {
        editorRef.current && editorRef.current.remove()
      }
    }
  }, [])

  useEffect(() => {
    if (editorRef.current && editorRef.current.txt) {
      editorRef.current.txt.html(value)
    }
  }, [value])

  useEffect(() => {
    editorRef.current.$textElem.attr('contenteditable', !disabled)
  }, [disabled])

  return <div ref={containerRef} />
}
